<template>
  <div>
    <!--面包屑-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>员工管理</el-breadcrumb-item>
      <el-breadcrumb-item>员工列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!--卡片-->
    <el-card class="box-card">
      <!-- 搜索与添加区域 -->
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输入内容"  clearable >
            <el-button slot="append" icon="el-icon-search" ></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="addClick">添加用户</el-button>
        </el-col>
      </el-row>

      <!--用户表格-->
      <el-table :data="listForm" stripe border style="width: 100%">
        <el-table-column type="index" ></el-table-column>
        <el-table-column prop="createDate" label="日期" width="180">
          <template slot-scope="scope">
            {{scope.row.createDate | dateFormat}}
          </template>
        </el-table-column>
        <el-table-column prop="accountId" label="姓名" width="180"></el-table-column>
        <el-table-column prop="nickName" label="昵称"></el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <el-switch
                    @change="userStateChanged(scope.row.status)"
                    v-model="scope.row.status + '' "
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    active-value="1"
                    inactive-value="0">
            </el-switch>
          </template>
        </el-table-column>

        <!--操作-->
        <el-table-column  label="操作">
          <template slot-scope="scope">
            <el-tooltip :enterable="false" effect="dark" content="编辑用户" placement="top">
              <el-button type="primary" icon="el-icon-edit" size="mini" @click="detailClick(scope.row.userId)"></el-button>
            </el-tooltip>
            <el-tooltip :enterable="false" effect="dark" content="分配用户" placement="top">
              <el-button type="danger" icon="el-icon-share" size="mini"></el-button>
            </el-tooltip>
            <el-tooltip :enterable="false" effect="dark" content="删除角色" placement="top">
              <el-button type="warning" icon="el-icon-delete" size="mini" @click="delClick(scope.row.userId)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <!--分页区域-->
      <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageNum"
              :page-sizes="[1, 2, 5, 10]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
      </el-pagination>

    </el-card>

    <!--添加用户对话框-->
    <el-dialog title="添加用户" :visible.sync="addDialogVisible" width="30%" @close="addHandleClose">
    <span>
      <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px" >
        <el-form-item label="账号" prop="accountId">
          <el-input v-model="addForm.accountId"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="passWord">
          <el-input v-model="addForm.passWord"></el-input>
        </el-form-item>
              <el-form-item label="邮箱" prop="email">
          <el-input v-model="addForm.email"></el-input>
        </el-form-item>
              <el-form-item label="昵称" prop="nickName">
          <el-input v-model="addForm.nickName"></el-input>
        </el-form-item>
      </el-form>
      <!--底部区域-->
    </span>
      <span slot="footer" class="dialog-footer">
      <el-button @click="addDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="addClick">确 定</el-button>
    </span>
    </el-dialog>

    <!--编辑用户对话框-->
    <el-dialog title="编辑用户" :visible.sync="editDialogVisible" width="30%" @close="editHandleClose">
    <span>
      <el-form :model="editForm" label-width="70px" ref="editFormRef">
        <el-form-item label="账号" prop="accountId">
          <el-input v-model="editForm.accountId" disabled></el-input>
        </el-form-item>
        <el-form-item label="昵称" prop="nickName">
          <el-input v-model="editForm.nickName"></el-input>
        </el-form-item>
              <el-form-item label="邮箱" prop="email">
          <el-input v-model="editForm.email"></el-input>
        </el-form-item>
              <el-form-item label="手机" prop="mobile">
          <el-input v-model="editForm.mobile"></el-input>
        </el-form-item>
      </el-form>
      <!--底部区域-->
    </span>
      <span slot="footer" class="dialog-footer">
      <el-button @click="editDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="editClick">确 定</el-button>
    </span>
    </el-dialog>


  </div>
</template>

<script>
  import {userHttp} from 'network/user'

  export default {
    data() {

      // 验证邮箱的规则
      let checkEmail = (rule, value, cb) => {
        // 验证邮箱的正则表达式
        const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
        if (regEmail.test(value)) {
          // 合法的邮箱
          return cb()
        }
        cb(new Error('请输入合法的邮箱'))
      }

      // 验证手机号的规则
      let checkMobile = (rule, value, cb) => {
        // 验证手机号的正则表达式
        const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
        if (regMobile.test(value)) {
          return cb()
        }
        cb(new Error('请输入合法的手机号'))
      }

      return {
        addDialogVisible: false,
        editDialogVisible: false,
        pageNum: 1,
        pageSize: 10,
        total: 1,
        loading: false,
        listForm: [],
        addForm:{
          accountId: '',
          passWord: '',
          email: '',
          nickName: '',
        },
        editForm:{},
        addFormRules: {
          accountId: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            {
              min: 3,
              max: 10,
              message: '用户名的长度在3~10个字符之间',
              trigger: 'blur'
            }
          ],
          passWord: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            {
              min: 6,
              max: 15,
              message: '用户名的长度在6~15个字符之间',
              trigger: 'blur'
            }
          ],
          email: [
            { required: true, message: '请输入用户邮箱', trigger: 'blur' },
            // { validator: checkEmail, trigger: 'blur' }
          ],
          mobile: [
            { required: true, message: '请输入用户手机', trigger: 'blur' },
            // { validator: checkMobile, trigger: 'blur' }
          ]
        },

      };
    },
    methods: {
      //监听添加用户对话框的关闭事件，重置表单内容
      addHandleClose(){
        this.$refs.addFormRef.resetFields()
      },

      //监听编辑用户对话框的关闭事件,重置表单内容
      editHandleClose(){
        this.$refs.editFormRef.resetFields()
      },

      //监听当前页的事件
      handleCurrentChange(pageIndex){
        console.log(pageIndex);
        this.pageNum = pageIndex;
        userHttp.listPage(this.pageNum,this.pageSize).then(res => {
          this.listForm = res.data.list;
          this.total = res.data.total;
          this.pageNum = res.data.pageNum;

        });
      },

      //监听当前页的条数事件
      handleSizeChange(pageIndex){
        console.log(pageIndex);
        this.pageSize = pageIndex;
        userHttp.listPage(this.pageNum,this.pageSize).then(res => {
          this.listForm = res.data.list;
          this.total = res.data.total;
          this.pageNum = res.data.pageNum;
        })
      },

      //添加用户
      addClick(){
        this.$router.push('/emp/add')
      },

      //编辑用户
      editClick(){
        userHttp.edit(this.editForm).then(res => {
          if (res.code === 20000){
            this.$message.success(res.message)
            //刷新数据
            this.initList()
          } else{
            this.$message.error(res.message)
          }
          //关闭对话框
          this.editDialogVisible = false;
        })
      },

      //用户详情
      detailClick(userId){
        this.editDialogVisible = true;
        userHttp.get(userId).then(res => {
          this.editForm = res.data
        })
      },

      //删除用户
      delClick(userId) {
        console.log(userId);
        this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //确认操作
          userHttp.del(userId).then(res=>{
            if (res.code === 20000){
              this.$message.success(res.message)
              //刷新数据
              this.initList()
            } else{
              this.$message.error(res.message)
            }
          });
        })
      },

      //初始化列表页面
      initList(){
        userHttp.listPage(this.pageNum,this.pageSize).then(res => {
          this.listForm = res.data.list;
          this.total = res.data.total;
          this.pageNum = res.data.pageNum;

        })
      },

    },
    created(){
      //初始化列表
      this.initList()
    },

  }
</script>

<style scoped>

</style>
